<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页-青鸟优品</title>
    <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/index.css">
    <script src="./assets/js/jquery.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <!-- 自定义公共js文件 -->
    <script src="./assets/js/common.js"></script>
    <!-- 
        商品素材来自京东
        https://new.jd.com/?innerAnchor=100011386594_100012254352_100006378137_100011529848&focus=1 
    -->
</head>

<body>

    <!-- navbar-inverse -->
    <nav class="navbar navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./index.html">青鸟商城</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-left">
                    <!-- <li class="active"><a href="./list.html">热门推荐 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">国际品牌</a></li>
                    <li><a href="#">数码电器</a></li>
                    <li><a href="#">智能手机</a></li>
                    <li><a href="#">每日特价</a></li> -->
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="./login.html">登录</a></li>
                    <li><a href="./reg.html">注册</a></li>
                </ul>

            </div>
        </div>
    </nav>


    <!-- 轮播图区域 -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <!-- <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> -->
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <!-- <div class="item active">
                <img src="./uploads/slides/01.jpg" alt="...">
            </div> -->
           
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>


    <!--  推荐商品 -->
    <div class="container goods-list">
        <div class="row">
            <!-- 广告位1 -->
            <div class="col-xs-12 adv adv01">
                <!-- <img src="./uploads/adv/adv-03.jpg" alt=""> -->
            </div>
        </div>
        <div class="row product-list">
            <!-- <div class="col-xs-3">
                <div class="thumbnail">
                    <a href="./detail.html">
                <img src="http://img13.360buyimg.com/n1/s450x450_jfs/t1/56116/18/9072/206430/5d6748f1Ecee8ab04/dcf884b62613a60f.jpg" alt="">

                        <h5>新款iPhoneSE全新上市</h5>
                        <p class="text-muted">以旧换新至高补贴300元</p>
                        <div class="buy-btn">立即抢购</div>
                    </a>
                </div>
            </div> -->
        </div>
        <div class="row">
            <div class="col-xs-12 adv adv02">
                <!-- <img src="./uploads/adv/adv-04.webp" alt=""> -->
            </div>
        </div>
    </div>


    <div class="container-fluid footer">
        <div class="row">
            <div class="col-lg-12">
                Copyright 2019 by www.braccp.com 北京畅想唯优信息技术有限公司 All rights reserved.
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                联系电话：029-88212666 地址：西安市雁塔区电子一路 石油大学北门工会楼二层
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                备案号：陕ICP备19013769号-1
            </div>
        </div>
    </div>
    <div class="fixed-nav-right">
        <!-- 返回首页 -->
        <div class="fixed-home">
            <a href="./index.html">
                <i class="glyphicon glyphicon-home"></i>
            </a>
        </div>
        <!-- 购物车 -->
        <div class="fixed-cart">
            <a href="./cart.html">
                <i class="glyphicon glyphicon-shopping-cart"></i>
            </a>
        </div>
        <!-- 返回顶部 -->
        <div class="back-top">
            <i class="glyphicon glyphicon-chevron-up"></i>
        </div>
    </div>



</body>
<script>
    // / 跟路径: 指向的是当前域名的指向的根目录
    
    // 获取商品列表
    $.ajax({
        url:'/apis/index.php?c=product&a=list',
        type:'GET',
        dataType:'json',
        data:{},
        success(res){
            if(res.errcode==0&&res.data.list){
                var html=``;
                res.data.list.forEach(item=>{
                    html+=`
                    <div class="col-xs-3">
                        <div class="thumbnail">
                            <a title="${item.name}" href="/detail.html?id=${item.id}">
                            <img src="${item.cover}" alt="">
                                <h5>${item.name}</h5>
                                <p class="text-muted">${item.description.substr(0,42)}...</p>
                                <div class="buy-btn">立即抢购</div>
                            </a>
                        </div>
                    </div>
                    `
                });
                $(".product-list").html(html);
            }
        }
    });
    // 获取轮播图
    $.get('/apis/index.php?c=slider&a=list',{},res=>{
        if(res.errcode==0&&res.data){
            var html='';
            var indicators='';
            res.data.forEach((item,index)=>{
                if(index==0){
                    html+=`
                    <div class="item active">
                        <img src="${item.img}" alt="...">
                    </div>
                    `;
                    indicators+=`<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>`
                }else{
                    html+=`
                    <div class="item">
                        <img src="${item.img}" alt="...">
                    </div>
                    `;
                    indicators+=`<li data-target="#carousel-example-generic" data-slide-to="0"></li>`
                }    
            });
            // 追加到轮播的页面区域
            $(".carousel-inner").html(html);
            $(".carousel-indicators").html(indicators);

        }
    },'json');

    // 广告位
    $.ajax({
        url:'/apis/index.php?c=adv&a=list',
        type:'GET',
        data:{
            page:'index'
        },
        dataType:'json'
    }).then(res=>{
        if(res.errcode==0&&res.data){
            // 渲染第一个广告位
            var adv_01=res.data[0];
            var adv01=`
                <a href="${adv_01.url}" title="${adv_01.title}" target="_blank">
                    <img src="${adv_01.img}"> 
                </a>
            `;
            $(".adv01").html(adv01);
            // 渲染第二个广告位
            var adv_02=res.data[1];
            var adv02=`
                <a href="${adv_02.url}" title="${adv_02.title}" target="_blank">
                    <img src="${adv_02.img}"> 
                </a>
            `;
            $(".adv02").html(adv02);
        }
    });
</script>
</html>